<!--
  ~ Copyright 2020 Red Hat, Inc. and/or its affiliates.
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div data-field="container" class="container">
    <div class="row">
        <p data-field="taskStateType" style="font-weight: bold;"></p>
        <form>
            <div class="radio">
                <input type="radio" data-field="notStartedInput" style="margin: 4px 0 0" name="optradio" checked>
                <label data-field="notStarted"></label>
            </div>
            <div class="radio">
                <input type="radio" data-field="notCompletedInput" style="margin: 4px 0 0" name="optradio">
                <label data-field="notCompleted"></label>
            </div>
        </form>
    </div>
    <div class="row" style="width: 200px;">
        <p data-field="taskExpirationDefinition" style="font-weight: bold; display:inline-block"></p>
        <a data-field="notificationPopover" id="notificationPopover" tabindex="0" role="button" data-toggle="popover" data-trigger="hover" data-html="true" class="popover-pf-info" data-placement="top">
            <span class="glyphicon glyphicon-info-sign"></span>
        </a>
        <div data-field="taskExpiration" id="taskExpiration"></div>
    </div>
    <div data-field="timeperiodDiv">
        <div class="row">
            <p data-field="notify" style="margin-top: 5px; font-weight: bold;"></p>
            <div data-field="periodBox" style="width: 240px;"></div>
        </div>
    </div>
    <div data-field="datetimeDiv" style="display:none; margin-bottom: 10px;">
        <div class="row">
            <p data-field="notifyAfter" style="font-weight: bold; margin-top: 10px;"></p>
            <div class="col-sm-2" style="margin-left: -20px;">
                <div data-field="dateTimePicker"></div>
            </div>
            <div class="col-sm-5" style="margin-left: -20px;">
                <div data-field="timeZonePicker" style="margin-left: -20px;"></div>
            </div>
        </div>
    </div>
    <div data-field="repeatNotificationsDiv">
        <div class="row">
            <div class="form-group">
                <div class="col-sm-2" style="margin-left: -20px;">
                    <p data-field="notificationRepeat" style="font-weight: bold;"></p>
                    <div data-field="repeatNotification"></div>
                </div>
                <div class="col-sm-3">
                    <div class="row" data-field="repeatNotificationPanelDiv" style="display:none;">
                        <div data-field="notifyEveryPanelDiv">
                            <p data-field="notifyEvery" style="font-weight: bold;"></p>
                            <div data-field="repeatBox" id="repeatBox"></div>
                        </div>
                        <p data-field="until" style="font-weight: bold;"></p>
                        <div class="radio">
                            <input data-field="taskStateChanges" style="margin: 4px 0 0" type="radio" name="optradio" checked>
                            <label data-field="taskStateChangesLabel"></label>
                        </div>
                        <div class="radio">
                            <input data-field="repeatCountReaches" style="margin: 4px 0 0" type="radio" name="optradio">
                            <label data-field="repeatCountReachesLabel"></label>
                        </div>
                        <div class="form-control" name="period" min="0" type="number" data-field="repeatCount" style="width: 80px; margin-left: 20px;" disabled></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row" data-field="expressionDiv" style="display:none;">
        <textarea data-field="expressionTextArea" class="form-control" rows="5" style="width:500px; height: 50px; resize: none; margin-top: 20px;"></textarea>
        <p>
            <i class="fa fa-question-circle" style="color: grey;"></i>
            <span data-field="syntaxRequirement"></span>
        </p>
    </div>
    <div class="row" style="width: 500px;">
        <hr>
    </div>

    <div class="row">
        <p data-field="message" style="font-weight: bold;"></p>
        <div class="form-group">
            <div class="col-sm-3" style="margin-left: -20px;">
                <p data-field="from" style="margin: 0"></p>
                <select data-field="liveSearchFromDropDown" id="from" style="width: 200px;"></select>
            </div>
            <div class="col-sm-3">
                <p data-field="replyToOptional" style="margin: 0; display: inline"></p>
                <a data-field="replyPopover" tabindex="0" role="button" data-toggle="popover" data-trigger="hover" data-html="true" class="popover-pf-info" data-placement="top">
                    <span class="glyphicon glyphicon-info-sign"></span>
                </a>
                <select data-field="liveSearchReplyToDropDown" id="replyTo" style="width: 200px;"></select>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="form-group">
            <div class="col-sm-3" style="margin-left: -20px;">
                <p data-field="to-users" style="margin: 10px 0 0 0"></p>
                <select data-field="multipleSelectorInputUsers" id="toUsers" style="width: 200px;"></select>
            </div>
            <div class="col-sm-3">
                <p data-field="to-groups" style="margin: 10px 0 0 0"></p>
                <select data-field="multipleSelectorInputGroups" id="toGroups" style="width: 200px;"></select>
            </div>
        </div>
    </div>
    <div class="row">
        <p data-field="to-emails" style="margin: 10px 0 0 0;"></p>
        <input data-field="emails" type="text" class="form-control" max="99" style="width:500px;">
        <p data-field="incorrectEmail" style="margin: 0; color: red"></p>
    </div>
    <div class="row">
        <input data-field="subject" type="text" class="form-control" max="99" style="width:500px; margin-top: 20px;">
    </div>
    <div class="row">
        <textarea data-field="body" class="form-control" rows="5" id="comment" style="width:500px; resize: vertical; margin-top: 20px;"></textarea>
    </div>
    <div class="row" data-field="errorDivPanel" style="width: 500px; margin-top:10px; color:red;">
    </div>

    <div class="row" style="width: 500px; margin-top:10px;">
        <div class="text-right">
            <button data-i18n-key="notification.close" type="button" data-field="closeButton" class="btn btn-default"></button>
            <button data-i18n-key="notification.ok" type="button" data-field="okButton" class="btn btn-primary"></button>
        </div>
    </div>
</div>
